草庐IT

CSS 响应中心 Div

全部标签

javascript - 如何使用 Google Chrome 扩展更改所选文本的 CSS

我正在为使用contextMenus更改所选文本的CSS的Chrome浏览器制作一个扩展程序。但我无法访问HTML结构,即所选文本的parentNode,因为在本例中我可以非常轻松地做到这一点。varselection=window.getSelection();如果在浏览器中默认使用,这将返回所选文本的parentNode,稍后我可以使用它来更改CSS。如何使用Chrome浏览器扩展程序实现这一点? 最佳答案 由于Chrome不允许您使用上下文菜单与您单击的元素进行交互,因此您必须创建一个contentscript存储在页面上被右

javascript - 添加动态响应式背景图片的最佳方式是什么?

向静态站点添加(响应式)背景图像的最佳方式是什么?另一个要求(描述为“动态”)是图像由后端设置,因此不能直接写入CSS文件。选项A:通过style属性在模板中注入(inject)背景图像。优点:浏览器的Preparser可以获取它。Contra:它直接添加样式并硬编码到不理想的标记中。我也不知道如何在不向style属性中添加super复杂的媒体查询的情况下实现响应式图像解决方案。选项B:在模板中注入(inject)响应式背景图像源作为数据属性,并通过JavaScript将最佳假设写入style属性。优点:响应式图像是可以实现的。内联样式仅通过脚本写入标记。Contra:当JavaScr

javascript - 你怎么能抓取dom中的元素并在没有id的情况下应用不同的css?

我在这里有点困惑。我正在做一个动态元素,我想应用不同的css具有相同类但没有id的div。我如何将不同的css应用到具有相同类的第一个div,然后不同的css到同一类的第二个div等等......假设我将fullwidthContainer类应用于3divs对于第一个div,我想要宽度1000px,第二个我想要800px等等。我不能在这里给出id或其他类,因为它是动态生成的。请帮忙。谢谢。好的,我是用javascript做的functionemphatic(){vartotalContainers=document.getElementsByClassName('fullwidthCo

javascript - 调整大小时,Jquery Resizable Div 宽度和高度变为 0

我有这个代码:我的JavaScript代码:$('#child').resizable({animate:true,helper:'.ui-resizable-helper',maxWidth:500,maxHeight:500,aspectRatio:true});使用上面的代码,我的可调整大小的div按预期工作,但是当我添加containment选项时,div的width和height调整大小为0,在任何方向调整大小时。$('#child').resizable({animate:true,helper:'.ui-resizable-helper',maxWidth:500,max

javascript - 为什么函数响应 .prototype 但常规对象不响应?

考虑:functionFoo(){}varx=newFoo();现在x和Foo具有相同的原型(prototype),但只有Foo响应.prototype:Object.getPrototype(x)===Foo.prototype//truex.prototype===Foo.prototype//falseFoo.prototype//Foo{}(dependingonwhichbrowser)x.prototype//undefined为什么x.prototype不起作用,而Foo.prototype却起作用? 最佳答案 pro

javascript - 检查 CSS 选择器是否有效

我有一个供用户输入CSS选择器的字段,我想检查它是否有效(根据css3specification)。我尝试使用css3specification中的表达式正如anotherstackoverflowtopic中所建议的那样,但它不起作用-我构建的正则表达式与有效的选择器不匹配。我现在所拥有的只是:try{document.querySelector(selector);}catch(e){//handlebadinput}但这似乎不是一个好的解决方案-querySelector函数是为获取元素而设计的,检查选择器只是一个副作用。此外,它不提供有关选择器问题的任何信息。我正在寻找类似do

javascript - 如何使用 div 元素构建 Recurly.js 表单?

我的团队正在使用Recurly.js在我们的网站中构建一个支付页面。我们一直在关注来自https://docs.recurly.com/js的文档.根据文档,Buildaformhoweveryoulike.Usethedata-recurlyattributetoidentifyinputfieldtargetstoRecurly.js.ToidentifywhereRecurly.jswillinjectcarddatafields,werecommendusingsimpledivelements.问题在于div元素实际上并未显示在表单中。这是一个基于文档的可重现的简短示例:re

javascript - 删除类时如何避免 css 转换(旋转)?

我想通过向其添加CSS类来旋转元素onclick。问题是,当删除相同的CSS类时,元素会第二次旋转。fiddle:https://jsfiddle.net/L3x2zhd1/1/JS:varel=document.getElementById('el');el.onclick=function(){el.className='rotate'setTimeout(function(){el.className=''},1000)};CSS:#el{width:50px;height:50px;background-color:red;-webkit-transition:-webkit-

javascript - WebPack如何将所有的css文件放到一个css文件中

我是WebPack的新手,我希望能够获取一个CSS文件目录(.app/styles/[css文件...])并将它们输出到一个CSS文件(dist/styles.css).目前,所有的JavaScript文件都被编译成一个单独的“index_bundle.js”文件,这是完美的,但我想为我的CSS文件实现同样的效果。经过大量“谷歌搜索”后,我发现WebPack的ExtractTextPlugin应该能够帮助解决这个问题,但这只适用于添加到“entry”属性的一个CSS文件(例如:entry:{style:"./app/styles/style.css"})然后作为链接标记添加到html的

javascript - 使用浏览器解析 CSS 而无需触及 DOM/样式

我有这样的东西:constsomeCSS=`.foo{padding:20px;background-color:#ddf;width:100px;}.bar{height:100px;}.foo{padding-top:30px;/*thisoverridesthepreviousone*/}`;我可以将此添加到DOM中,并使用这样的每个规则(jsFiddle)取回所有选择器:conststyle=document.createElement('style');style.innerHTML=someCSS;document.head.append(style);conststyle